<template>
    <div>
        <van-popup ref="popup" class="popup" v-model="show_value" round position="bottom" :close-on-click-overlay="false" closeable close-icon="clear" :style="{ height: '300px' }">
            <div class="content">
                <div class="content-title">请仔细核对商品是否完成发货，填写物流单号点击确认即可完成本次发货。</div>
                <div class="content-flex">
                    <div class="flex-left">物流单号</div>
                    <div class="flex-right">
                        <van-field class="right-inp" v-model="logistics_code" type="text" placeholder="请输入物流单号" />
                    </div>
                </div>
                <div class="content-bottom">
                    <van-button class="bottom-left" @click="close">取消</van-button>
                    <van-button class="bottom-right" @click="right">确定</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script>
export default {
    data() {
        return {
            show_value: false,
            logistics_code: '',
        }
    },
    methods: {
        show() {
            this.logistics_code = '';
            this.show_value = true; 
        },
        close() {
            this.show_value = false; 
        },
        right() {
            if (this.logistics_code == '') {
                this.$toast('物流单号不能为空')
                return false;
            }
            this.$emit('right', {
                logistics_code: this.logistics_code,
            })
            this.show_value = false; 
        }
    },
}
</script>
<style lang="less" scoped>
.content{
    padding: 68px 38px 38px 32px;
    .content-title{
        font-size: 32px;
        line-height: 48px;
        color: #202630;
        font-weight: bold;
        margin-bottom: 28px;
    }
    .content-flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 42px; 
        .flex-left{
            width: 264px;
            height: 80px;
            background: #F7F8FA;
            border-radius: 12px;
            font-size: 28px;
            line-height: 80px;
            font-weight: 400;
            color: #202630;
            text-align: center;
        }
        .flex-right{
            width: 400px;
            height: 80px;
            background: #F7F8FA;
            border-radius: 12px;
            font-size: 28px;
            line-height: 80px;
            font-weight: 400;
            color: #798391;
            text-align: center;
            .right-inp{
                padding-left: 24px;
                background: transparent;
            }
        }
    }
}

.content-bottom{
    display: flex;
    justify-content: space-between;
    .bottom-left{
        width: 238px;
        height: 96px;
        background: #F5F5F6;
        font-size: 32px;
        line-height: 96px;
        color: #798391;
        font-weight: 400;
        border-radius: 12px;
        border: none;
    }
    .bottom-right{
        width: 430px;
        height: 96px;
        background: #49CA6F;
        font-size: 32px;
        line-height: 96px;
        color: #FFFFFF;
        font-weight: 400;
        border-radius: 12px;
        border: none;
    }
}
</style>